<template>
  <div class="profile">
    <div class="userinfo">
      <usercard :userInfo="userInfo"></usercard>
    </div>
    <div class="userSetting">
      <div class="border-card menu">
        <n-menu mode="horizontal" :options="menuOptions" />
      </div>
      <div class="border-card content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import userStore from "~/store/user";
import { storeToRefs } from "pinia";
import type { MenuOption } from "naive-ui";
import { NMenu } from "naive-ui";
import Usercard from "~/application/profile/usercard.vue";
import { RouterLink } from "vue-router";
import { h } from "vue";
const menuOptions: MenuOption[] = [
  {
    key: "1",
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: "userPublish",
            params: {
              lang: "zh-CN",
            },
          },
        },
        { default: () => "发布作品" }
      ),
  },
  {
    key: "2",
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: "userAllPublish",
            params: {
              lang: "zh-CN",
            },
          },
        },
        { default: () => "全部作品" }
      ),
  },
  {
    label: "信息设置",
    key: "3",
  },
  {
    label: "资源设置",
    key: "4",
  },
  {
    label: "资源管理",
    key: "5",
  },
];

const userSte = userStore();
const { userInfo } = storeToRefs(userSte);
</script>

<style scoped lang="scss">
.profile {
  display: flex;
  height: var(--content-height);

  .userinfo {
    margin-right: 10px;
    width: 30%;
  }

  .userSetting {
    display: flex;
    flex: 1;
    flex-direction: column;
    position: relative;

    .content {
      margin-top: 10px;
      flex: 1;
      overflow: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
@media screen and (max-width: 1440px) {
  .userinfo {
    transform: scale(0);
    display: none;
  }
}
</style>
